<template>
  <el-dialog
    :visible.sync="modifyVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="$t('modify')"
    width="64%"
  >
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="$t('baseInfo')" name="baseInfo">
        <el-form
          ref="baseForm"
          :model="modifydialogForm"
          label-width="120px"

        >
          <el-form-item
            :rules="[
              { required: true, message: $t('FormNameEmpty'), trigger: 'change' }
            ]"
            :label="$t('FormName')"
            prop="formName"
          >
            <el-input v-model.trim="modifydialogForm.formName" clearable/>
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: $t('formPrefixEmpty')},
              { min: 1, max: 3, message: $t('charactersLength'), trigger: 'blur' }
            ]"
            :label="$t('formPrefix')"
            prop="formPrefix"
          >
            <el-input
              v-model.trim="modifydialogForm.formPrefix"
              onkeyup="this.value = this.value.replace(/[\u4e00-\u9fa5]/ig,'')"
              clearable
            />
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: $t('itemCategoryEmpty'), trigger: 'change'}
            ]"
            :label="$t('projectCategory')"
            prop="category"
          >
            <el-select
              v-model="modifydialogForm.category"
              filterable
              clearable
              @change="getFormTypeList"
            >
              <el-option
                v-for="i in categoryList"
                :key="i.id"
                :label="`${$t(i.name)}`"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: $t('formTypeEmpty'), trigger: 'change'}
            ]"
            :label="$t('formType')"
            prop="formType"
          >
            <el-select v-model="modifydialogForm.formType" clearable>
              <el-option
                v-for="i in formTypeList"
                :key="i.id"
                :label="`${$t(i.name)}`"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('formVersion')">
            <el-input v-model.trim="modifydialogForm.version" clearable/>
          </el-form-item>
          <el-form-item :label="$t('iseffective')">
            <el-switch
              v-model="modifydialogForm.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item :label="$t('remark')">
            <el-input
              v-model.trim="modifydialogForm.remark"
              :rows="2"
              type="textarea"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('formItem')" name="formItem">
        <el-transfer
          :titles="[$t('checkItemList'), $t('listOfFormItems')]"
          :props="{
            key: 'itemId',
            label: 'itemName',
          }"
          v-model="itemOrders"
          :data="itemForType"
          filterable
          target-order="push"
          @right-check-change="rightCheck"
        >
          <span slot-scope="{ option }">
            <el-popover
              :content="option.itemName"
              placement="top-start"
              width="200"
              trigger="hover"
            >
              <span slot="reference">{{ option.itemName }}</span>
            </el-popover>
          </span>
        </el-transfer>
        <div class="el-transfer__buttons">
          <el-button
            :disabled="locationList.length !== 1"
            type="primary"
            icon="el-icon-arrow-up"
            circle
            class="el-transfer__button"
            @click="changeUpBtn(1)"
          />
          <el-button
            :disabled="locationList.length !== 1"
            type="primary"
            icon="el-icon-arrow-down"
            circle
            class="el-transfer__button"
            @click="changeDownBtn(-1)"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"

        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import eFormCheckApi from '@/api/eForm/eFormCheck'
import networkTips from '@/mixins/networkTips'
export default {
  name: 'ModifyForm',
  components: {},
  mixins: [networkTips],
  data() {
    return {
      modifydialogForm: {},
      itemForType: [], // 编辑时左边表单项集合
      itemOrders: [], // 编辑时右边表单项集合
      activeName: 'baseInfo',
      modifyVisible: false,
      formTypeList: [],
      categoryList: [],
      locationList: []
    }
  },
  methods: {
    // 点击保存
    doSave() {
      this.$refs['baseForm'].validate((valid) => {
        if (valid) {
          const arr = this.itemOrders.map((ele) => {
            return { itemId: ele }
          })
          eFormCheckApi
            .doUpdate({ ...this.modifydialogForm, checkFormItems: arr })
            .then((res) => {
              this.netTips(res, this.handleClose, this.handleUpdate)
            })
        } else {
          return false
        }
      })
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 项目分类
    async getCategoryList() {
      const res = await eFormCheckApi.getCategoryList({ type: 'form' })
      this.categoryList = res.data
    },
    // 表单类型
    async getFormTypeList(category, isfirst = false) {
      const res = await eFormCheckApi.getFormTypeList({
        category: category
      })
      this.formTypeList = Array.isArray(res.data) ? res.data : []
      // isfirst 来判断change事件是否清空表单类型当中的内容
      if (!isfirst) {
        this.$set(this.modifydialogForm, 'formType', '')
      }
    },
    // 取当前表单下绑定的表单项
    getItemList() {
      eFormCheckApi
        .getItemList({
          formID: this.modifydialogForm.id,
          category: this.modifydialogForm.category
        })
        .then((res) => {
          this.itemForType = res.data.responseCheckItemForTypes
          this.itemOrders = res.data.responseCheckItemOrders
        })
    },
    // 打开弹窗
    openDialog(val) {
      this.modifydialogForm = val
      this.getCategoryList()
      this.getItemList()
      this.getFormTypeList(this.modifydialogForm.category, true)
      this.modifyVisible = true
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    rightCheck(val) {
      this.locationList = val
    },
    // 向上
    changeUpBtn(num) {
      const idx = this.itemOrders.findIndex((ele) => ele === this.locationList[0])
      if (idx === 0) return
      const upDate = JSON.parse(JSON.stringify(this.itemOrders[idx - num]))
      this.itemOrders.splice(idx - num, 1)
      this.itemOrders.splice(idx, 0, upDate)
    },
    // 向下
    changeDownBtn(num) {
      const idx = this.itemOrders.findIndex((ele) => ele === this.locationList[0])
      if (idx === this.itemOrders.length - 1) return
      const upDate = JSON.parse(JSON.stringify(this.itemOrders[idx - num]))
      this.itemOrders.splice(idx - num, 1)
      this.itemOrders.splice(idx, 0, upDate)
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/defaultStyle.scss";
.el-form-item {
  margin: 0 30px 15px 0;
}
.el-input {
  width: 600px;
}
.el-select {
  width: 600px;
}
.el-transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-tab-pane {
  display: flex;
  align-items: center;
  ::v-deep .el-transfer-panel {
    width: 365px;
    .el-checkbox-group {
      .el-transfer-panel__item {
        width: 140px;
        float: left;
      }
    }
  }
}
::v-deep .el-transfer__buttons {
  width: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-transfer__button {
    box-sizing: border-box;
    display: block;
    border-radius: 50%;
    margin-left: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
